<template>
	<view class="orders orders-index">
		<!-- 顶部内容 -->
		<view class="title flex-row">
			<view class="title-text">
				订单列表
			</view>
			<view class="function-body flex-row">
				<view @click="callService" class="customer-service function-btn flex-row">
					<view class="icon">
						<uni-icons 
							type="phone-filled" 
							size="14" 
							color="#aaa">
						</uni-icons>
					</view>
					<view class="text">
						联系客服
					</view>
				</view>
				<view @click="leaveMessage" class="return function-btn flex-row">
					<view class="icon">
						<uni-icons 
							type="chat-filled" 
							size="14" 
							color="#aaa">
						</uni-icons>
					</view>
					<view class="text">
						留言反馈
					</view>
				</view>
			</view>
		</view>
		<view class="product" v-for="item in orderList" :key="item.advOrdersId">
			<!-- 产品订单信息 -->
			<view class="order-product flex-row-around">
				<!-- <view class="product-image">
					<image src="https://img0.baidu.com/it/u=210567578,202775826&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" mode=""></image>
				</view> -->
				<view class="order-content flex-column-around">
				<!-- 	<view class="product-name">
						产品的名字产品的名字产品的名字产品的
					</view> -->
					<view class="product-message flex-row">
						<view class="left flex-column-around">
							<view class="price">
								<text style="color: orangered;">￥</text>
								<text 
									style="font-size: 25px;font-weight: bold;
										   color: orangered;">
									{{item.ordersamount}}
								</text>
							</view>
							<view class="orderdata">
								订单日期: {{item.advOrdersdate}}
							</view>
							<view class="orderno">
								订单编号: {{item.ordersno}}
							</view>
						</view>
						<view class="show flex-column">
							<view class="show-button">
								<view class="btn-body" @click="checkOrder(item)">
									查看详情
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom flex-row">
				<view class="order-status">
					<text style="color: #777;">订单状态: </text>
					<text>{{orderStatusMap.get(item.orderStatus)}}</text>
				</view>
				<view class="order-do" v-if="getDo(item.orderStatus).length">
				    <view class="do-button" v-for="(action, index) in getDo(item.orderStatus)" :key="index">
				        <view @click="doThing(item, action)" class="btn-body">
				            {{ action }}
				        </view>
				    </view>
				</view>
				<view v-if="item.remark &&item.orderStatus == 8 " class="order-remark">
				    <text>拒绝理由: {{ item.remark }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../../utils/request.js';
	import { GET_USER_INFO } from '../../../utils/CommonValues.js';
	export default {
		data() {
			return {
				orderStatusMap: {},
				userInfo: '',
				orderList: [],
				pageSize: 10, // 取的数据长度
				pageNum: 1, // 取的数据页数
			}
		},
		onReachBottom() {
			console.log("已经到达底部了，正在加载数据")
			// 到达底部重新继续加载数据
			this.getList();
		},
		onLoad() {
			this.initOrderStatus();
			GET_USER_INFO().then(response => {
				this.userInfo = response;
				this.getList();
			})
		},
		methods: {
			doThing(item, action) {
			    switch(action) {
			        case '付款':
			            request.POST("/system/wx-pay/jsapi",{
			                advOrdersId: item.advOrdersId,
			                weOpenid: item.weOpenid,
			                productName: '产品',
			                ordersamount: item.ordersamount,
			                productDesc: '产品描述'
			            }).then(response =>{
			                console.log("response--->",response);
			                wx.requestPayment({
			                    "timeStamp": response.data.timeStamp,
			                    "nonceStr": response.data.nonce,
			                    "package": "prepay_id="+response.data.prepay_id,
			                    "signType": "RSA",
			                    "paySign": response.data.signature,
			                    success: function(res) {
									request.POST("/system/wx-pay/payOver", {
									    advOrdersId: item.advOrdersId,
									    orderStatus: 2
									}).then(response => {
									    uni.showToast({
									        title: '支付成功',
									        icon: 'success',
									        duration: 500,
									        complete: () => {
									            uni.redirectTo({
									                url: '/pages/my/orders/orders'
									            });
									        }
									    });
									})
			                        console.log('支付成功：', res);
			                    },
			                    fail: function(res) {
			                        console.log('支付失败：', res);
			                        uni.showToast({
			                            title: '支付失败，请重试',
			                            icon: 'none',
			                            duration: 500
			                        });
			                    },
			                    complete: function(res){
			                        console.log('结束：', res);
			                    }
			                });    
			            }).catch(error => {
			                uni.showToast({
			                    title: '未知错误',
			                    icon: 'none',
			                    duration: 500
			                });
			            })
			            break;
			        case '确认收货':
						console.log("点击了确认收货")
			            request.GET(`/system/orders/get/${item.advOrdersId}`, null)
			                .then(response => {
			                    console.log(response, "确认收货的查询");
								if(response.statusCode == 200) {
									// 在拉取数据之前要清空当前的数据并且把pageNum设置为1
									this.orderList = [];
									this.pageNum = 1;
									this.getList();
								}
			                });
			            break;
			        case '退款':
			            request.POST("/system/orders/orderRefund", {
			                advOrdersId: item.advOrdersId,
			                orderStatus: item.orderStatus
			            }).then(response => {
			                uni.showToast({
			                    title: '退款已申请',
			                    icon: 'success',
			                    duration: 500, 
			                    complete: () => {
			                        uni.redirectTo({
			                            url: '/pages/my/orders/orders'
			                        });
			                    }
			                });
			            }).catch(error => {
			                uni.showToast({
			                    title: '未知错误',
			                    icon: 'none',
			                    duration: 500
			                });
			            });
			            break;
			        case '换货':
			            request.POST("/system/orders/goodsChangeRequest", {
			                advOrdersId: item.advOrdersId
			            }).then(response => {
			                uni.showToast({
			                    title: '换货已申请',
			                    icon: 'success',
			                    duration: 500, 
			                    complete: () => {
			                        uni.redirectTo({
			                            url: '/pages/my/orders/orders'
			                        });
			                    }
			                });
			            }).catch(error => {
			                uni.showToast({
			                    title: '未知错误',
			                    icon: 'none',
			                    duration: 500
			                });
			            });
			            break;
			    }
			},
			getList() {
				console.log("getList启动")
				request.GET('/system/orders/listByApp', {
					advMembersId: this.userInfo.advMembersId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					reasonable: false
				}).then(response => {
					this.orderList.push(...response.data);
					console.log(response, this.pageNum, this.pageSize, "分页数据");
					if(response.data.length != 0) {
						this.pageNum = this.pageNum + 1;
					}
					console.log("订单----->",response);
				})
			},
			// 初始化订单状态信息
			initOrderStatus() {
				var status = new Map();
				status.set(1, '未付款');
				status.set(2, '已付款');
				status.set(3, '已发货');
				status.set(4, '已收货');
				status.set(5, '退款中');
				status.set(6, '已退款');
				status.set(7, '换货中');
				status.set(8,'已完成');
				this.orderStatusMap = status;
			},
			// 获取操作
			getDo(status) {
			    let s = [];
			    switch (status) {
			        case 1: 
			            actions.push('付款'); 
			            break;
			        case 2: 
			            break;
			        case 3: 
			            actions.push('确认收货');  
			            break;
			        case 4: 
			            actions.push('退款', '换货');  
			            break;
			        case 5: 
			            break;
			        case 6: 
			            break;
			        case 7: 
			            break;
			        case 8: 
			            break;
			    }
			    return actions;
			},
			// 联系客服
			callService() {
				uni.navigateTo({
					url: '/pages/my/customerService/customerService'
				})
			},
			// 留言
			leaveMessage() {
				uni.navigateTo({
					url: '/pages/my/leaveMessage/leaveMessage'
				})
			},
			// 查看订单详情
			checkOrder(item) {
				uni.navigateTo({
					url: '/pages/my/orderDetails/orderDetails?advOrdersId='+item.advOrdersId+'&orderStatus='+item.orderStatus
				})
			}
		}
	}
</script>

<style lang="less">
.title {
	width: 750rpx;
	height: 50px;
	line-height: 30px;
	margin: 0 auto;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	background-color: rgba(255, 255, 255, .7);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	.title-text {
		box-sizing: border-box;
		border-left: 5px solid skyblue;
		width: 250rpx;
		height: 30px;
		margin: 10px;
		padding-left: 10px;
	}
	.function-btn {
		margin: 0 5px;
		font-size: 14px;
		color: #aaa;
	}
}
.product {
	box-sizing: border-box;
	width: 750rpx;
	height: 200px;
	margin-top: 10px;
}
.order-product {
	width: 720rpx;
	height: 140px;
	box-shadow: 0 0 10px 0 #ddd;
	border-radius: 10px;
	margin: 0 auto;
	// .product-image {
	// 	width: 200rpx;
	// 	height: 120px;
	// 	border-radius: 5px;
	// 	overflow: hidden;
	// }
	.order-content {
		width: 680rpx;
		height: 100%;
		.product-name {
			box-sizing: border-box;
			width: 100%;
			height: 30px;
			font-weight: bold;
			padding: 5px 0;
		}
		.product-message {
			width: 100%;
			height: 100px;
			.left {
				width: 500rpx;
				height: 100%;
				align-items: flex-start;
				.orderno, .orderdata {
					font-size: 12px;
					color: #aaa;
				}
			}
			.show {
				@my-button-color: royalblue;
				width: 180rpx;
				height: 100%;
				justify-content: center;
				.show-button {
					box-sizing: border-box;
					width: 150rpx;
					height: 30px;
					border-radius: 5px;
					background-color: rgba(255, 255, 255, 0);
					border: 1px solid @my-button-color;
					text-align: center;
					line-height: 30px;
					box-shadow: 3px 3px 0 0 @my-button-color;
					font-size: 14px;
					color: @my-button-color;
					transition: all .1s;
					&:active {
						box-shadow: none;
					}
				}
			}
		}
	}
}
.bottom {
    width: 680rpx;
    height: auto;
    margin: 0 auto;
    background-color: #eee;
    box-shadow: inset 3px 3px 10px 0 #ddd;
    border-radius: 0 0 10px 10px;
    .order-status {
        font-weight: bold;
        margin: 0 10px;
    }
    .order-do {
        display: flex;
        flex-direction: row;  /* 横向排列 */
        justify-content: space-between;  /* 添加间隔 */
        width: 100%;
        .do-button {
            flex: 1;  /* 确保按钮均匀分布 */
            margin: 0 5px;  /* 增加按钮之间的间距 */
            .btn-body {
                width: 100%;  /* 按钮宽度占满父元素 */
                text-align: center;
                line-height: 30px;
                border-radius: 5px;
                background-color: limegreen;
                color: white;
                margin: 5px 0;
                transition: all .1s;
                box-shadow: 0 0 10px 0 #bbb;
            }
        }
    }
    .order-remark {
        margin-top: 10px;
        color: red;
        font-size: 14px;
        font-weight: bold;
    }
}
</style>
